<template>
	<div class="content">
		<Collapse v-model="value1">
			<Panel name="1">
				V1
				<p slot="content" style="float: right;">
					<Icon style="cursor: pointer;z-index: 99;" type="ios-add-circle" size="21" color="#2d8cf0" @click="addRatios('v1')"></Icon>
				</p>
				<p slot="content">
					<Form label-position="right" :label-width="100">
						<div class="canshu" v-for="(item,index) of config.v1" :key="index">
							<FormItem :label="index == 0 ? '释放规则：':''">
								直推荐
								<Input class="w80" v-model="item.num" />名<span v-show="index == config.v1.length - 1">及以上</span>有效用户可拿
								<Input class="w80" v-model="item.lay" />代存币理财收益的
								<Input class="w80" v-model="item.ratio" />%
								<Button style="margin-left: 15px;" type="primary" size="large" @click="updateRatios(item,index)">保　存</Button>
								<Button style="margin-left: 15px;" type="error" size="large" @click="delRatios(item,index)">删　除</Button>
							</FormItem>
						</div>
					</Form>
				</p>
			</Panel>
			<Panel name="2">
				V2
				<p slot="content" style="float: right;">
					<Icon style="cursor: pointer;z-index: 99;" type="ios-add-circle" size="21" color="#2d8cf0" @click="addRatios('v2')"></Icon>
				</p>
				<p slot="content">
					<Form label-position="right" :label-width="100">
						<div class="canshu" v-for="(item,index) of config.v2" :key="index">
							<FormItem :label="index == 0 ? '释放规则：':''">
								直推荐
								<Input class="w80" v-model="item.num" />名<span v-show="index == config.v2.length - 1">及以上</span>有效用户可拿
								<Input class="w80" v-model="item.lay" />代存币理财收益的
								<Input class="w80" v-model="item.ratio" />%
								<Button style="margin-left: 15px;" type="primary" size="large" @click="updateRatios(item)">保　存</Button>
								<Button style="margin-left: 15px;" type="error" size="large" @click="delRatios(item,index)">删　除</Button>
							</FormItem>
						</div>
					</Form>
				</p>
			</Panel>
			<Panel name="3">
				V3
				<p slot="content" style="float: right;">
					<Icon style="cursor: pointer;z-index: 99;" type="ios-add-circle" size="21" color="#2d8cf0" @click="addRatios('v3')"></Icon>
				</p>
				<p slot="content">
					<Form label-position="right" :label-width="100">
						<div class="canshu" v-for="(item,index) of config.v3" :key="index">
							<FormItem :label="index == 0 ? '释放规则：':''">
								直推荐
								<Input class="w80" v-model="item.num" />名<span v-show="index == config.v3.length - 1">及以上</span>有效用户可拿
								<Input class="w80" v-model="item.lay" />代存币理财收益的
								<Input class="w80" v-model="item.ratio" />%
								<Button style="margin-left: 15px;" type="primary" size="large" @click="updateRatios(item)">保　存</Button>
								<Button style="margin-left: 15px;" type="error" size="large" @click="delRatios(item,index)">删　除</Button>
							</FormItem>
						</div>
					</Form>
				</p>
			</Panel>
		</Collapse>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				value1: [1, 2, 3], // 默认展开第一个列表
				config: [],
				dataValue: '',
				token: localStorage.mytoken,
				minPool: '',
			}
		},
		created() {

		},
		mounted() {
			this.$Message.config({
				top: 250
			});
			this.getOther(); // 其他配置查询
		},
		methods: {
			// 处理时间段时间格式
			getTime(daterange) {
				this.dataValue = daterange;
			},
			addRatios(v) {
				switch(v) {
					case 'v1':
						this.config.v1.push({
							num: '',
							lay: '',
							ratio: '',
							levelId: '1'
						})
						break;
					case 'v2':
						this.config.v2.push({
							num: '',
							lay: '',
							ratio: '',
							levelId: '2'
						})
						break;
					case 'v3':
						this.config.v3.push({
							num: '',
							lay: '',
							ratio: '',
							levelId: '3'
						})
						break;
				}
			},
			delRatios(item, i) {
				let $this = this;
				this.$Modal.confirm({
					title: '删除配置',
					content: '是否要删除配置？(确认删除后页面会刷新，请先保存修改后的值)',
					onOk: function() {
						//根据ID判断新增的是否已经保存，如果新增的还没保存就直接从数组删。
						if(item.id) {
							$this.axios.post('/admin/push/config/delete', this.qs.stringify({
								id: item.id,
								levelId: item.levelId
							})).then(res => {
								if(res.data.code == 200) {
									$this.$Message.info(res.data.msg);
									$this.delOfAry(item, i);
								}
							})
						} else {
							$this.$Message.info('操作成功!');
							$this.delOfAry(item, i);
						}
					}
				});
			},
			updateRatios(item, i) {
				//根据ID判断是新增还是修改
				if(item.id) {
					this.axios.post('/admin/push/config/update', this.qs.stringify({
						id: item.id,
						levelId: item.levelId,
						num: item.num,
						lay: item.lay,
						ratio: item.ratio,
					})).then(res => {
						if(res.data.code == 200) {
							this.$Message.info(res.data.msg);
						}
					})
				} else {
					this.axios.post('/admin/push/config/add', this.qs.stringify({
						levelId: item.levelId,
						num: item.num,
						lay: item.lay,
						ratio: item.ratio,
					})).then(res => {
						if(res.data.code == 200) {
							this.$Message.info(res.data.msg);
							//给新增用户的item加上ID 不然删除不掉
							switch(item.levelId) {
								case '1':
									this.config.v1[i].id = res.data.data;
									break;
								case '2':
									this.config.v2[i].id = res.data.data;
									break;
								case '3':
									this.config.v3[i].id = res.data.data;
									break;
							}
						}
					})
				}
			},
			getOther() {
				this.axios.get('/admin/push/config/get').then(res => {
					if(res.data.code == 200) {
						this.config = res.data.data;
						this.config.v1.forEach((item, i) => {
							this.config.v1[i].ratio = Number(item.ratio).mul(100);
						})
						this.config.v2.forEach((item, i) => {
							this.config.v2[i].ratio = Number(item.ratio).mul(100);
						})
						this.config.v3.forEach((item, i) => {
							this.config.v3[i].ratio = Number(item.ratio).mul(100);
						})
					}
				})
			},
			delOfAry(item, i) {
				switch(Number(item.levelId)) {
					case 1:
						this.config.v1.splice(i, 1);
						break;
					case 2:
						this.config.v2.splice(i, 1);
						break;
					case 3:
						this.config.v3.splice(i, 1);
						break;
				}
			}
		}
	}
</script>

<style lang="less" scoped>
	.p-10 {
		padding-top: 0 !important;
		padding-left: 50px !important;
	}
	
	.w50 {
		width: 50px !important;
	}
	
	.w25 {
		width: 25px !important;
	}
	
	.w120 {
		width: 120px !important;
	}
	
	.mar {
		margin-left: 5px;
	}
	
	.pl-100 {
		padding-left: 100px;
	}
	
	.visibility {
		visibility: hidden;
	}
</style>